<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>angular-transclude</title>
    <link href="../app/bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
</head>
<body>

<div class="container">
    <table class="table table-bordered" ng-controller="ctrl">
        <caption>通过ngSanitize模块的$sanitize服务解析html</caption>
        <thead>
        <tr>
            <th>使用的指令</th>
            <th>格式化方法</th>
            <th>指令的写法</th>
            <th>解析结果</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>ng-bind-html</td>
            <td>使用内置的$sanitize <br/>(不需要出现在js里,只要模型添加了ngSanitize模块, <br/>然后使用ng-bind-html,它的值就自动通过$sanitize编译)</td>
            <td>
                <pre>&lt;div ng-bind-html="myHtml"&gt;<br>&lt;/div&gt;</pre>
            </td>
            <td>
                <div ng-bind-html="myHtml"></div>
            </td>
        </tr>
        <tr>
            <td>ng-bind-html</td>
            <td>使用$sce的trustAsHtml方法编译<br/>(以后会细讲$sce服务,这里不是重点)</td>
            <td>
                <pre>&lt;div ng-bind-html="trustHtml"&gt;<br>&lt;/div&gt;</pre>
            </td>
            <td>
                <div ng-bind-html="trustHtml"></div>
            </td>
        </tr>
        <tr>
            <td>ng-bind</td>
            <td>不编译</td>
            <td>
                <pre>&lt;div ng-bind="myHtml"&gt;<br>&lt;/div&gt;</pre>
            </td>
            <td>
                <div ng-bind="myHtml"></div>
            </td>
        </tr>
        </tbody>
    </table>
    <a class="btn btn-default" href="http://plnkr.co/edit/3FBasliZTRjKs3jwTpoR?p=preview" role="button">plunker</a>
</div>

<script src="../app/bower_components/jquery/dist/jquery.js"></script>
<script src="../app/bower_components/angular/angular.js"></script>
<script src="../app/bower_components/angular-sanitize/angular-sanitize.js"></script>

<script>

    var app = angular.module('myApp', ['ngSanitize']);
    app.controller('ctrl', function ($scope, $sce) {
        $scope.myHtml = '<p style="color:blue">an html\n' +
                '<em onclick="this.textContent=\'code_bunny\'">click here</em>\n' +
                'snippet</p>';
        $scope.trustHtml = $sce.trustAsHtml($scope.myHtml)
    });

</script>

</body>
</html>